<template>
  <div>
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
        :class="selecteId === item.id ? 'color' : ''"
        @click="changeId(item.id)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "一句诗词",
        },
        {
          id: 2,
          name: "毒鸡汤",
        },
        {
          id: 3,
          name: "励志句子",
        },
        {
          id: 4,
          name: "一句诗词",
        },
        {
          id: 5,
          name: "一句诗词",
        },
        {
          id: 6,
          name: "一句诗词",
        },
        {
          id: 7,
          name: "一句诗词",
        },
        {
          id: 8,
          name: "一句诗词",
        },
        {
          id: 9,
          name: "一句诗词",
        },
        {
          id: 10,
          name: "一句诗词",
        },
      ],

      selecteId: "1",
    };
  },
  methods: {
    changeId(val) {
      this.selecteId = val;
      if (val === 1) {
        this.$router.push("/poetry");
      } else if (val === 2) {
        this.$router.push("/about");
      } else if (val === 3) {
        this.$router.push("/sentence");
      } else if (val === 4) {
        this.$router.push("/poetry");
      } else if (val === 5) {
        this.$router.push("/about");
      } else if (val === 6) {
        this.$router.push("/sentence");
      } else if (val === 7) {
        this.$router.push("/poetry");
      } else if (val === 8) {
        this.$router.push("/about");
      } else if (val === 9) {
        this.$router.push("/poetry");
      } else {
        this.$router.push("/sentence");
      }
    },
  },
};
</script>

<style scoped lang="scss">
ul {
  margin-top: 30px;
}
li {
  list-style: none;
  font-size: 16px;
  text-align: center;
  color: #b8b8b8;
  cursor: pointer;
  margin-top: 10px;
}
.color {
  color: #4caf50;
}
li:hover {
  color: #4caf50;
}
</style>
